<template>
	<view class="i-magic-cube e-flex " :style="[bodyStyle]">
		<view class="magic-cube-box e-rela" :style="[magicCubeStyle]" v-if="option.layoutType == 1">
			<view class="e-abso" @tap="jumpLink(item.link)"  :style="[imgStyle,{
					width: (item.endX - item.startX) * 25 + 25 + '%',
					height:px2rpx(item.height),
					top: item.startY * 25 + '%',
					left: item.startX * 25 + '%',
					padding:`${px2rpx(item.paddingTop+imageMargin)} ${px2rpx(item.paddingX+imageMargin)}  ${px2rpx(item.paddingBottom+imageMargin)} ${px2rpx(item.paddingX+imageMargin)}`
				
			}]" v-for="(item, index) in option.list" :key="index">
				<image :style="[imgStyle]" class="image"  :src="$fullLink(item.url)" >
				</image>
			</view>
		</view>
		<view class="style-box" :class="'style-box' + option.layoutType" v-else>
			<image  mode="aspectFill" @tap="jumpLink(item.link)" class="image" :src="$fullLink(item.url)" :style="[imgStyle]" v-for="(item, index) in option.list" :key="index">
			</image>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { pageLink } from './type'
	import { px2rpx } from './utils'
	
	type Item = {
		url : string
		wide:number
		len:number
		width: number
		height: number
		top: number
		left: number
		startX:number
		startY:number
		endX:number
		endY:number
		paddingTop:number
		paddingBottom: number
		paddingX: number
		link : pageLink,
	
	}
	const props = withDefaults(defineProps<{
		option : {
			list: Item[],
			layoutType: 1|2|3|4|5|6|7|8|9,
			backgroundColor: string
			imageMargin: number
			paddingTop: number
			paddingBottom: number
			paddingX: number
			radiusTop: number
			radiusBottom: number
			disabledAxis: number[],
		}
	}>(), {
		option: () => ({
			list: [],
			layoutType:1,
			backgroundColor: 'rgba(245, 246, 249, 1)',
			imageMargin: 0,
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
			disabledAxis: [],
		})
	})
	
	const ctx = useCurrentInstance()
	
	const { viewStyle:bodyStyle,jumpLink } = useLayoutCompoments(ctx, props.option)
	
	const imageMargin = computed(() => {
		if(props.option.layoutType === 1 ){
			return props.option.imageMargin ||0
		}
		return 0
	})
	
	const imgStyle = computed(() => {
		return {
			'--margin': imageMargin.value+'px',
			borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`
		}
	})
	
	const magicCubeStyle = computed(() => {
		if (props.option.list.length) {
			return { height: px2rpx(Math.max(...props.option.list.map(item => item.endY)) * 80 + 80) }
		} else {
			return { height: 0 }
		}
	})

</script>

<style scoped lang="scss">
.magic-cube-box {
	width: 100%;
	>view{
		overflow: hidden;
		.image{
			width: 100%;
			height: 100% !important;
		}
	}
}
.style-box {
	width: 100%;
	min-height: 640rpx;
}
.style-box2 {
	.image {
		height: 320rpx !important;
		&:first-child {
			margin-bottom: var(--margin);
		}
	}
}
.style-box3 {
	display: flex;
	.image {
		width: calc((100% - var(--margin)) / 2) !important;
		height: 640rpx !important;
		&:first-child {
			margin-right: var(--margin);
		}
	}
}
.style-box4 {
	display: flex;
	.image {
		width: calc((100% - (var(--margin) * 2)) / 3) !important;
		height: 640rpx !important;
		margin-right: var(--margin);
		&:last-child {
			margin: 0;
		}
	}
}
.style-box5,
.style-box6,
.style-box9 {
	display: flex;
	flex-wrap: wrap;
	.image {
		width: calc((100% - var(--margin)) / 2) !important;
		height: calc(320rpx - (var(--margin) / 2)) !important;
	}
}

.style-box5 {
	.image {
		&:first-child {
			margin-right: var(--margin);
		}
		&:last-child {
			margin-top: var(--margin);
		}
	}
}
.style-box6 {
	.image {
		&:first-child {
			margin-bottom: var(--margin);
		}
		&:last-child {
			margin-left: var(--margin);
		}
	}
}
.style-box7,
.style-box8 {
	display: flex;
	position: relative;
	.image {
		width: calc((100% - var(--margin)) / 2) !important;
		height: calc(320rpx - (var(--margin) / 2)) !important;
	}
}
.style-box7 {
	.image {
		&:nth-child(2n) {
			height: 640rpx !important;
			margin-left: var(--margin);
		}
		&:last-child {
			position: absolute;
			left: 0;
			bottom: 0;
			width: calc((100% - var(--margin)) / 2) !important;
		}
	}
}
.style-box8 {
	.image {
		&:first-child {
			height: 640rpx !important;
			margin-right: var(--margin);
		}
		&:last-child {
			position: absolute;
			right: 0;
			bottom: 0;
			width: calc((100% - var(--margin)) / 2) !important;
		}
	}
}
.style-box9 {
	.image {
		&:first-child {
			margin: 0 var(--margin) var(--margin) 0;
		}
		&:nth-child(3) {
			margin-right: var(--margin);
		}
	}
}
</style>
